<template>
  <el-form-item
    :label="props.info.cn"
    size="mini"
  >
    <span v-if="data">
      {{data.name}}
      <el-button type="info" size="mini" @click="read">查看</el-button>
    </span>
    <!--<span style="color:#aaa" v-else>{{props.info.info}}</span>-->


    <template v-if="showUpload" size="mini" type="primary">
      <el-upload
        class="full"
        size="mini"
        ref="upload"
        v-if="showUpload"
        :action="previewUrl"
        :show-file-list="false"
        :limit="1"
        :before-upload="beforeUpload"
        :on-change="myUpload"
        :with-credentials="true"
        :on-success="handleSuccess"
        :on-error="onError"
      >
        <el-button size="small" type="primary">上传</el-button>
      </el-upload>
    </template>
    <el-button v-if="showDel&&data" size="mini" type="danger" @click="del">删除</el-button>
  </el-form-item>
</template>

<script>
  export default {
    name: 'UploadPdf',
    props: {
      props: {
        type: Object
      },
      showUpload: {
        type: Boolean,
        default: false
      },
      showDel: {
        type: Boolean,
        default: false
      },
      formData: {//接收表单的数据,上传成功后直接修改数据的值
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        previewUrl: process.env.BASE_API + 'file/up',
        loading: null
      }
    },
    computed: {
      data() {
        return this.props.data && JSON.parse(this.props.data)
      }
    },
    methods: {
      myUpload(file) {
        this.$emit('myUpload', file, this.props)
      },
      beforeUpload() {
        this.loading = this.$loading();
      },
      handleSuccess(res, file) {
        this.loading.close();
        this.loading = null

        this.$set(this.formData, this.props.info.en, {})
        let data = {
          name: file.name,
          url: res.url
        }
        this.$set(this.formData, this.props.info.en, JSON.stringify(data))

        this.$emit('handleSuccess', res, file, this.props)
      },
      read() {
        if (this.data) {
          window.open(this.data.url)
          this.$emit('read', this.props);
        } else {
          this.$message({
            message: '该文件不存在',
            type: 'error'
          })
        }
      },
      del() {
        if (this.props.data) {
          this.$confirm('是否删除该条信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$refs.upload.clearFiles()
            this.$emit('del', this.props)

          }).catch(() => {
            return this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          this.$message({
            message: '没有文件,无需删除',
            type: 'info'
          })
        }

      },
      onError(err) {
        this.loading.close();
        this.$alert(err.msg || '上传失败', '提示', {
          confirmButtonText: '确定'
        })
      }
    }
  }
</script>

<style scoped>
  span + .el-button {
    margin-left: 10px;
  }
  .full{
    display: inline-block;
  }
</style>
